import React, { Component } from 'react'
import Head from '../../components1/head/head'
import { Radio } from 'antd';
import q1 from '../../../img2/q1.png'
import q2 from '../../../img2/q2.png'
import q3 from '../../../img2/q3.png'
import q4 from '../../../img2/q4.png'
import q5 from '../../../img2/q5.png'
import q6 from '../../../img2/q6.png'
import q7 from '../../../img2/q7.png'
import q8 from '../../../img2/q8.png'
import q9 from '../../../img2/q9.png'

import {Link } from 'react-router-dom'


import './cgtijiao.scss'
export default class cgtijiao extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 1,
        }
    }
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
        // console.log(this.state.value)
    };
    render() {
        return (
            <div className="cg-body">
                <Head  history={this.props.history}/>
                <div className="cg-wrap">
                    {/* 导航 */}

                    {/* 已提交 */}
                    <div className="cg-yuqi">
                        <img src={q1} alt="" />
                        <p>订单已提交，请于24小时内完成支付<span>（逾期订单将被取消）</span></p>
                        <div className="cg-address">
                            <img src={q2} alt="" />
                        送货至： 但小兵 北京 北京市 昌平区 天通苑明天第一城4号楼101 固定电话010-21541589
                        </div>
                    </div>
                    {/* 请支付 */}
                    <div className="cg-pay">
                        <div className="cg-pay-y">
                            <span>应付金额：<i>165.90</i> （在线支付）</span>
                            <span>订单编号：425954156947</span>
                        </div>
                        <div className="cg-pay-e">支付平台</div>
                        <div className="cg-pay-s">
                            <Radio.Group className="cg-radio" onChange={this.onChange} value={this.state.value}>
                                <Radio value={1}><span className="cg-sp"><img src={q3} alt="" /></span></Radio>
                                <Radio value={2}><span className="cg-sp"><img src={q4} alt="" /></span></Radio>
                                <Radio value={3}><span className="cg-sp"><img src={q5} alt="" /></span></Radio>
                                <Radio value={4}><span className="cg-sp"><img src={q6} alt="" /></span></Radio>
                            </Radio.Group>
                        </div>
                    </div>

                    {/* 支付宝支付图 */}
                    <div className="cg-jie">
                        <div className="cg-tu">
                            <div className="cg-compu">
                                使用电脑支付<br />
                                <img src={q7} alt="" />
                                <button><Link to="/paymentsuccessful">立即支付</Link></button>
                            </div>
                            <span>或</span>
                            <div className="cg-zfb">
                                使用支付宝钱包扫一扫付款                                <br />
                                <img src={q8} alt="" />
                            </div>

                        </div>

                    </div>

                </div>
                {/* 微信支付图 */}
                <div className="cg-wechat">
                   <div>
                   <div>
                        <img src={q9} alt="" />
                    </div>
                    <span></span>
                    <div className="cg-wx">
                        使用微信支付 <br/>
                        <img src={q8} alt=""/>

                    </div>
                   </div>
                </div>

                {/* 版权 */}
                <div className="sp-ban">
                    <p>版权所有 © 2016易和生活港  保留所有权利 | 沪ICP备12042163</p>
                    <span>易和生活 纵享品质</span>
                </div>

            </div>
        )
    }
}
